<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="robots" content="all,follow">
    <!-- Bootstrap CSS-->
    <link rel="stylesheet" href="/mall/vendor/bootstrap/css/bootstrap.min.css">
    <!-- Font Awesome CSS-->
    <link rel="stylesheet" href="/mall/vendor/font-awesome/css/font-awesome.min.css">
    <!-- Google fonts - Roboto -->
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,700">
    <!-- owl carousel-->
    <link rel="stylesheet" href="/mall/vendor/owl.carousel/assets/owl.carousel.css">
    <link rel="stylesheet" href="/mall/vendor/owl.carousel/assets/owl.theme.default.css">
    <!-- theme stylesheet-->
    <link rel="stylesheet" href="/mall/css/style.default.css" id="theme-stylesheet">
    <!-- Custom stylesheet - for your changes-->
    <link rel="stylesheet" href="/mall/css/custom.css">
    <!-- Favicon-->
    <link rel="shortcut icon" href="/mall/favicon.png">
    <!-- Tweaks for older IEs-->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]-->
</head>

<body>
<!-- navbar-->
<header class="header mb-5" th:replace="mall/topbar::head">
</header>
<div id="all">
    <div id="content">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <!-- breadcrumb-->
                    <nav aria-label="breadcrumb">
                        <ol class="breadcrumb">
                            <li class="breadcrumb-item"><a href="/MallGoods/index">首页</a></li>
                            <li class="breadcrumb-item"><a href="#">商品列表</a></li>
                            <li class="breadcrumb-item"><a href="#">详情</a></li>
                        </ol>
                    </nav>
                </div>
                <div class="col-lg-3">
                    <!--
            *** MENUS AND FILTERS ***
            _________________________________________________________
            -->
                    <div class="card sidebar-menu mb-4">
                        <div class="card-header">
                            <h3 class="h4 card-title">分类列表</h3>
                        </div>
                        <div class="card-body">
                            <ul class="nav nav-pills flex-column category-menu">
                                <!--                                <li><a href="category.html" class="nav-link active">分类</a></li>-->
                                <li th:each="class : ${allClassify}"><a
                                        th:href="@{/MallGoods/ToClassify(classifyId = ${class.classifyId})}"
                                        th:text="${class.classifyName}" class="nav-link active">分类</a></li>
                            </ul>
                        </div>
                    </div>

                </div>
                <div class="col-lg-9 order-1 order-lg-2">
                    <div id="productMain" class="row">
                        <div class="col-md-6">
                            <div data-slider-id="1" class="owl-carousel shop-detail-carousel">
                                <div class="item"><img th:src="'/Images' + ${goodsDetails.goods.goodsImg}" alt=""
                                                       class="img-fluid"></div>
                                <div class="item"><img th:src="'/Images' + ${goodsDetails.goods.goodsImg}" alt=""
                                                       class="img-fluid"></div>
                                <div class="item"><img th:src="'/Images' + ${goodsDetails.goods.goodsImg}" alt=""
                                                       class="img-fluid"></div>
                            </div>
                            <div class="ribbon sale">
                                <div class="theribbon">SALE</div>
                                <div class="ribbon-background"></div>
                            </div>
                            <!-- /.ribbon-->
                            <div class="ribbon new">
                                <div class="theribbon">NEW</div>
                                <div class="ribbon-background"></div>
                            </div>
                            <!-- /.ribbon-->
                        </div>
                        <div class="col-md-6">
                            <div class="box">
                                <h1 class="text-center" th:text="${goodsDetails.goods.goodsName}">White Blouse
                                    Armani</h1>
                                <p class="goToDescription"><a th:text="${goodsDetails.goods.goodsIntroduce}"
                                                              href="#details" class="scroll-to">Scroll to product
                                    details, material &amp; care and sizing</a></p>
                                <p class="price" th:text="${goodsDetails.goods.goodsPrice} + 元">$124.00</p>
                                <p class="text-center buttons"><a
                                        th:href="@{/MallCar/AddCar(shopGoodsId=${goodsDetails.goods.goodsId},shopNumber=1,shopTotal=${goodsDetails.goods.goodsPrice})}"
                                        class="btn btn-primary">
                                    <i class="fa fa-shopping-cart"></i> 加入购物车</a></p>
                            </div>
                            <div data-slider-id="1" class="owl-thumbs">
                                <button class="owl-thumb-item"><img th:src="'/Images' + ${goodsDetails.goods.goodsImg}"
                                                                    alt=""
                                                                    class="img-fluid"></button>
                                <button class="owl-thumb-item"><img th:src="'/Images' + ${goodsDetails.goods.goodsImg}"
                                                                    alt=""
                                                                    class="img-fluid"></button>
                                <button class="owl-thumb-item"><img th:src="'/Images' + ${goodsDetails.goods.goodsImg}"
                                                                    alt=""
                                                                    class="img-fluid"></button>
                            </div>
                        </div>
                        <div class="col-lg-12">
                            <!-- breadcrumb-->
                            <nav aria-label="breadcrumb" style="border-radius: 5%;">
                                <ol class="breadcrumb">
                                    <h5>商品评论</h5>

                                </ol>
                            </nav>
                        </div>
                        <div id="customer-order" class="col-lg-12">
                            <div class="box">
                                <div class="table-responsive mb-4">
                                    <table class="table">
                                        <thead>
                                        <tr>
                                            <th width="100px">用户</th>
                                            <th width="100px">评论时间</th>
                                            <th>评论内容</th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        <tr th:each="comments : ${goodsDetails.goodsComments}">
                                            <td th:if="${comments.commentState.commentStateId != 1}"
                                                th:text="${comments.userName}">小曾不想打代码
                                            </td>
                                            <td th:if="${comments.commentState.commentStateId != 1}"
                                                th:text="${comments.commentTime == 0?'':#dates.format(comments.commentTime, 'yyyy-MM-dd HH:mm:ss')}">
                                                2001-12-12
                                            </td>
                                            <td th:if="${comments.commentState.commentStateId != 1}"
                                                th:text="${comments.commentContent}">内容
                                            </td>
                                        </tr>

                                        </tbody>
                                    </table>
                                    <form th:action="@{/MallComment/AddComment(commentGoodsId=${goodsDetails.goods.goodsId})}" method="post">
                                        <input name="commentContent" type="text" class="form-control" placeholder="请输入评论">
                                        <button class="fa fa-shopping-cart" type="submit">提交评论</button>
                                    </form>

                                </div>
                                <!-- /.table-responsive-->

                            </div>
                        </div>

                    </div>
                </div>
                <!-- /.col-md-9-->
            </div>
        </div>
    </div>
</div>
<div id="footer" th:replace="mall/footerbar::foot">
</div>
<script src="/mall/vendor/jquery/jquery.min.js"></script>
<script src="/mall/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="/mall/vendor/jquery.cookie/jquery.cookie.js">
</script>
<script src="/mall/vendor/owl.carousel/owl.carousel.min.js"></script>
<script src="/mall/vendor/owl.carousel2.thumbs/owl.carousel2.thumbs.js"></script>
<script src="/mall/js/front.js"></script>
</body>

</html>